<template>
  <el-scrollbar max-height="88vh">
    <div class="os-charts-bar">
      <template v-for="c in chartsList"
                :key="c.name">
        <os-charts-card :title="c.title"
                        :name="c.name"
                        @copy-chart-option="copyChartOption(c.name)">
          <os-charts :id="`${c.name}Chart`"
                     :ref="`${c.name}ChartRef`"
                     refresh />
        </os-charts-card>
      </template>
    </div>
  </el-scrollbar>
</template>
<script lang="ts">
  import { defineComponent, getCurrentInstance, nextTick, onMounted, ref } from 'vue'
  import osChartsCard from '../os-charts-card/index.vue'
  import barOptions from './barOptions'
  import copyTextOption from '../utils/copy-text-option'
  import $http from '@/utils/http'
  interface ChartOpt {
    name: string
    title: string
  }
  export default defineComponent({
    components: { osChartsCard },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const chartsList = ref<ChartOpt[]>([])

      for (let i = 1; i <= 3; i++) {
        chartsList.value.push({
          name: `bar${i}`,
          title: `柱状图${i}`,
        })
      }
      const copyChartOption = (type: string) => copyTextOption(proxy.$refs[`${type}ChartRef`].option)

      const handleChart = (type: string, res: any) => {
        switch (type) {
          case 'bar1':
            break
          case 'bar2':
            break
          case 'bar3':
            break
          default:
            break
        }
        proxy.$refs[`${type}ChartRef`].setOption(barOptions[`${type}Option`])
      }

      onMounted(() => {
        nextTick(() => {
          chartsList.value.forEach(async (el: any) => {
            const res: any = await $http(`charts/${el.name}`)
            console.log(el.name, res)
            handleChart(el.name, res)
          })
        })
      })

      return {
        chartsList,
        copyChartOption,
      }
    },
  })
</script>
<style lang="scss" scoped>
  @import '../charts.scss';
  @include b(charts-bar) {
    @include chartsCard;
  }
</style>